<template>
  <div class="detail">
    <SHeader :title="'商品详情'"></SHeader>
    <div class="detail-con">
      <div class="goods_img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1baeae">
          <van-swipe-item
            v-for="(item, index) in detail.goodsCarouselList"
            :key="index"
            ><img :src="item" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="desc">
        {{ detail.goodsName }}
      </div>
      <div class="delivery">免费邮 顺丰速递</div>
      <div class="price">￥{{ detail.sellingPrice }}</div>
      <div class="command">
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <div class="product-content" v-html="detail.goodsDetailContent"></div>
      </div>

      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-icon
          icon="cart-o"
          text="购物车"
          :badge="!count ? '': count"
          @click="goto"
        />
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          @click="HandleAddCart"
        />
        <van-action-bar-button
          type="danger"
          text="立即购买"
          @click="gotoCart"
        />
      </van-action-bar>
    </div>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { onMounted, reactive, toRefs, computed } from "vue";
import SHeader from "../components/Header.vue";
import { getDetail } from "../service/goods";
import { addCart } from "../service/cart";
import { Toast } from "vant";
import { useStore } from 'vuex'

export default {
  components: {
    SHeader,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore()

    const state = reactive({
      detail: {},
    });

    // 获取商品详情内容
    onMounted(async () => {
      const { id } = route.query;
    //   console.log(id);
      const { data } = await getDetail(id);
    //   console.log(data);
      state.detail = data;
    //   console.log(state.detail);

    // 每次页面刷新后也要请求数据，不然刷新后state里面的数据就可视化不了
    store.dispatch('updateCart')
    });

    // 添加购物车
    const HandleAddCart = async () => {
      const { resultCode } = await addCart({
        goodsCount: 1,
        goodsId: state.detail.goodsId,
      });
      console.log(resultCode);
      if (resultCode === 200) Toast("添加成功");
      store.dispatch('updateCart')
    };

    // 立即购买，把商品加入购物车，然后跳转购物车页面
    const gotoCart = async () => {
      await addCart({ goodsCount: 1, goodsId: state.detail.goodsId });
    // 更新购物车
      store.dispatch('updateCart')
      router.push('/cart')
    };

    // 去购物车
    const goto = () => {
      router.push("/cart");
    };

   const count =  computed(() => {
        return store.state.cartCount
    })

    return {
      ...toRefs(state),
      goto,
      HandleAddCart,
      gotoCart,
      count
    };
  },
};
</script>

<style lang="less" scoped>
.detail-content {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.goods_img {
  top: 50px;
}

.my-swipe img {
  width: 100%;
  height: 100%;
}
.desc {
  font-size: 17px;
  padding: 8px 10px;
  letter-spacing: 2px;
}
.delivery {
  color: grey;
  font-size: 15px;
  padding-left: 10px;
}
.price {
  color: red;
  font-size: 22px;
  padding: 10px;
}
ul {
  display: flex;
  justify-content: space-between;
  li {
    flex: 1;
    padding: 5px 0;
    text-align: center;
    font-size: 15px;
    border-right: 1px solid grey;
    box-sizing: border-box;
    &:last-child {
      border-right: none;
    }
  }
}
</style>